<template>
	<view class="main">
		<shop-nav title="购物车"></shop-nav>
		<view class="content"
			:style="'height: calc( 100vh - '+ (safeAreaBottomHeight + safeAreaTopHeight + 20) +'px )' ">
			<!-- 内容 -->
			<view class="goods-cart" :style="'padding-bottom:' + (safeAreaBottomHeight + 60)+ 'px' ">
				<view class="bigbox">
					<u-swipe-action v-for="(item, index) in cardList" :key="index">
						<u-swipe-action-item :options="options" :show="item.show"
							@click.stop="removeGoodsEvent(item,index)">
							<view class="u-flex u-row-between">
								<!-- 左边复选框 + 图片 -->
								<view class="left">
									<view class="checkbox">
										<u-checkbox-group>
											<u-checkbox :checked="item.checked" shape="circle"
												@change="firmSelected(index)">
												<u-icon class="home" name="home"></u-icon>
												<u-icon class="arrow-right" name="arrow-right" color="#aaa"
													size="20"></u-icon>
											</u-checkbox>
										</u-checkbox-group>
									</view>
									<image :src="item.url" mode="aspectFill"></image>
								</view>
								<!-- 右边介绍 + 价格等等 -->
								<view class="right">
									<view class="title-sku goods-title">{{item.title}}</view>
									<view class="title-sku goods-type">{{item.type}}</view>
									<view class="u-flex u-row-between">
										<view class="">￥{{ item.price | fixed }}</view>
										<view class="">
											<u-number-box v-model="item.num" :min="1"
												@change="setCartNum($event,index)"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
						<u-gap height="10" bg-color="#f8f8f8"></u-gap>
					</u-swipe-action>
				</view>
			</view>

			<!-- 底部状态栏 -->
			<view>
				<view class="goods-nav" :style="'bottom:' + safeAreaBottomHeight + 'px'">
					<view class="left">
						<view class="item">
							<u-checkbox-group>
								<u-checkbox :checked="isSelectedAllRow" :disabled="!cardList.length" shape="circle"
									@change="selectedAllRow">
									全选
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="item">
							<view class="goods-remove u-line-1" v-if="selectedAllRowLength"
								@click="removeGoodsListEvent">
								<u-icon name="trash-fill" size="30" color="#e5573e" label-color="#e5573e"
									label="批量删除"></u-icon>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="total-cost u-line-1">总价格<text class="red-price">￥{{sumPrice}}</text></view>
						<view class="buy btn u-line-1">
							结算<text v-if="selectedAllRowLength">({{selectedAllRowLength}})</text></view>
					</view>
				</view>
			</view>

		</view>
		<shop-bar :current="2"></shop-bar>
	</view>
</template>

<script>
	import { getNavIconDistance, getBarIconDistance } from '@/utils/utils.js';
	export default {
		filters: {
			// 过滤器处理价格
			fixed(val) {
				if (!val) return '0.00';
				return Number(val).toFixed(2);
			}
		},

		data() {
			return {
				//  总金额
				sumPrice: 0.00,
				// 选中的数量（总数）
				selectedAllRowLength: 0,
				// 选中的数组
				selectedAllRowList: [],
				// 是否全选
				isSelectedAllRow: false,
				// 头部适配高度
				safeAreaTopHeight: 0,
				// 底部适配高度
				safeAreaBottomHeight: 0,
				// 购物车list
				cardList: [{
						// 数量
						num: 1,
						// 价格
						price: 10,
						// 是否选中
						checked: false,
						// 商品url 
						url: require('@/static/waterfall/1.jpg'),
						// 商品id 
						id: 1,
						// 是否显示
						show: false,
						// 名称
						title: '扇子',
						// spce
						type: '千里江山'
					},
					{
						num: 2,
						price: 20,
						checked: false,
						url: require('@/static/waterfall/1.jpg'),
						id: 2,
						show: false,
						title: '扇子',
						type: '千里江山'
					},
					{
						num: 3,
						price: 30,
						checked: false,
						url: require('@/static/waterfall/1.jpg'),
						id: 3,
						show: false,
						title: '扇子',
						type: '千里江山'
					},
					{
						num: 4,
						price: 40,
						checked: false,
						url: require('@/static/waterfall/1.jpg'),
						id: 4,
						show: false,
						title: '扇子',
						type: '千里江山'
					},
					{
						num: 5,
						price: 50,
						checked: false,
						url: require('@/static/waterfall/1.jpg'),
						id: 5,
						show: false,
						title: '扇子',
						type: '千里江山'
					},
				],
				options: [{
					text: '移除',
					style: { backgroundColor: '#dd524d' }
				}],
			}
		},
		methods: {
			// 之后封装出去
			getTopIconDistance() {
				this.safeAreaTopHeight = 0;
				this.safeAreaBottomHeight = 0;
				this.safeAreaTopHeight = getNavIconDistance();
				this.safeAreaBottomHeight = getBarIconDistance() + 50;
			},
			// 合计总价格
			sumTotalPrice() {
				// 获取选择信息
				this.getSelectedList()
				this.sumPrice = 0
				this.selectedAllRowLength = 0
				for (let i = 0; i < this.selectedAllRowList.length; i++) {
					this.sumPrice += this.selectedAllRowList[i].price * this.selectedAllRowList[i].num
					this.selectedAllRowLength += this.selectedAllRowList[i].num
				}
				this.sumPrice = this.sumPrice.toFixed(2)
			},
			// 获取选中的数据
			getSelectedList() {
				let len = this.cardList.length
				this.selectedAllRowList = []
				for (let i = 0; i < len; i++) {
					if (this.cardList[i].checked) {
						this.selectedAllRowList.push(this.cardList[i])
					}
				}
			},
			// 选中数据
			firmSelected(index) {
				this.cardList[index].checked = !this.cardList[index].checked;
				this.computeSelectedAll()
				this.sumTotalPrice()
			},
			/* 删除数据从购物车中(单个) */
			removeGoodsEvent(item, index) {
				console.log('选择数据', index);
				console.log('删除的内容', item);
				uni.showLoading()
				// 请求接口写在此位置,延时的记得删除！

				setTimeout(function() {
					uni.hideLoading()
				}, 800)
			},
			/* 删除数据从购物车中(多个) */
			removeGoodsListEvent() {
				console.log("删除的内容", this.selectedAllRowList.length);
				uni.showLoading()
				// 请求接口写在此位置,延时的记得删除！

				setTimeout(function() {
					uni.hideLoading()
				}, 800)
				// 重新获取....
			},
			// 全选
			selectedAllRow() {
				this.isSelectedAllRow = this.cardList.length ? !this.isSelectedAllRow : false
				let len = this.cardList.length
				for (let i = 0; i < len; i++) {
					this.cardList[i].checked = this.isSelectedAllRow
				}
				this.sumTotalPrice()
			},
			// 判断全部商品选择
			computeSelectedAll() {
				for (let i = 0; i < this.cardList.length; i++) {
					if (this.cardList[i].checked) {
						this.isSelectedAllRow = true
					} else {
						this.isSelectedAllRow = false
						break
					}
				}
			},
			// 计步器
			setCartNum(e, i) {
				// 修改购物车数量
				this.cardList[i].num = e.value;
				if (this.cardList[i].checked) {
					this.sumTotalPrice();
				}
			},
		},
		created() {
			this.getTopIconDistance();
		}
	}
</script>

<style scoped lang="scss">
	.u-flex {
		display: flex;
		align-items: center;
	}

	.u-row-between {
		justify-content: space-between;
	}

	.goods-cart {
		// padding-bottom: 60px;

		.bigbox {
			width: 750rpx;
			border-radius: 10rpx;

			.left {
				box-sizing: border-box;
				padding: 0 15rpx;
				display: flex;
				align-items: center;

				.checkbox {
					padding: 0 15rpx;
				}

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				box-sizing: border-box;
				padding: 0 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 180rpx;

				.goods-type {
					font-size: var(--font-size-medium);
					color: var(--text-light);

					&:before {
						content: '类型：';
					}
				}

				.goods-title {
					font-size: var(--font-size-default);
				}

				.title-sku {
					width: 420rpx;
				}
			}
		}
	}

	.goods-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 2rpx #f2f2f2;
		background-color: var(--white);
		padding: 16rpx;
		padding-bottom: 21rpx;
		height: 60px;
		position: fixed;
		box-sizing: border-box;
		z-index: 50;
		width: 100%;

		.left {
			display: flex;
			font-size: var(--font-size-medium);

			.item {
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.right {
			display: flex;
			font-size: var(--font-size-default);
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: var(--white);
			}

			.total-cost {
				margin-right: 30rpx;

				.red-price {
					color: var(--red)
				}
			}

			.buy {
				background-color: var(--text-orange);
			}
		}
	}
</style>